<template>
  <div class="advice">
    <div class="advice-A">护肤流程建议：</div>
     <div class="advice-mid">



      <van-row type="flex" justify="space-around">
        <van-col span="4">
          <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_jiemian.png" alt="">
          </div>
           <p>洁面</p>
          <!-- <van-image :src="require('./img/定制2_slices/dingzhi_icon_jiemian.png')" /> -->
            
          </van-col>
        <van-col span="4">
           <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_bushui.png" alt="">
          </div>
           <p>补水</p>
        </van-col>
        <van-col span="4">
             <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_bushui.png" alt="">
          </div>
           <p>精华</p>
          
        </van-col>
        <van-col span="4">
           <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_bushui.png" alt="">
          </div>
           <p>乳液</p>
          </van-col>
        <van-col span="4">
           <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_bushui.png" alt="">
          </div>
           <p>面霜</p>
          </van-col>
        <van-col span="4">
             <div class="v-img">
              <img src="./img/定制2_slices/dingzhi_icon_bushui.png" alt="">
          </div>
           <p>化妆</p>

        </van-col>
      </van-row>
    
   </div>
   
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.advice{
  height: 32rem;
  width:46.875rem;
  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
   .advice-A{
    margin-top: 38px;
    margin-top: 1rem;
    margin-left: 49px;
    width: 210px;
    font-size: 30px;
  }
  .advice-mid{
    height:26.75rem;
    width: 52rem;
     

      .van-col {
          float: left;
          box-sizing: border-box;
          min-height: 10.25rem;
          max-width: 12.25rem;
          
      }
       .van-col--4 {
        width: 33%;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
        align-content: center;
        align-items: center;
        .v-img{
          width: 8rem;
          height: 8rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50% 50%;
          background: #FFE6E6 ;
          img{
            width: 30% !important;
            height:30% !important;
          }
        }
        p{
          margin-top:20px;
           font-size:1.5rem ;
        }
    }
    .van-col--6:nth-child(2) .v-img{
      background: #E9E6FF ;
    }
    .van-col--6:nth-child(3) .v-img{
      background: #E9F4F5 ;
    }
    .van-col--6:nth-child(4) .v-img{
      background: #E9F4F5;
    }
    .van-col--6:nth-child(5) .v-img{
      background: #FFE6F2 ;
    }
    .van-col--6:nth-child(6) .v-img{
      background: #FFEEB7 ;
    }

      
  }

}



</style>
